<view class="weui-flex tab-bar">
  <block v-for="item in list" :key="item.text">
    <navigator hover-class="none" :url="item.pagePath" open-type="switchTab" class="weui-flex__item menu-item"
      :style="item.active? 'color: '+(item.selectedColor? item.selectedColor : selectedColor) : ''">
      <image :src="item.selectedIconPath" v-if="item.active" class="img"></image>
      <image :src="item.iconPath" v-if="!item.active" class="img"></image>
      <text class='tabbar_text'>{{item.text}}</text>
    </navigator>
  </block>
  <view class="clear"></view>
</view>
<script>
  export default {
    name: 'my-tabbar',
    data() {
      return {
        color: '#333',
        selectedColor: '#1aad19',
        backgroundColor: '#1aad19',
        position: 'bottom',
        borderStyle: '#ccc',
        list: [
          {
            "pagePath": "pages/index",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": "static/images/tabbar/index.png",
            "selectedIconPath": "static/images/tabbar/index_.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/indexs",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": "@/static/images/tabbar/home.png",
            "selectedIconPath": "@/static/images/tabbar/home_.png",
            "text": "排号"
          },
          {
            "pagePath": "pages/waybill/index",
            "hidden": "false",
            "active": false,
            "selectedColor": '#409EFE',
            "iconPath": "@/static/images/tabbar/work.png",
            "selectedIconPath": "@/static/images/tabbar/work_.png",
            "text": "运单"
          },
          {
            "pagePath": "pages/mine/index",
            "hidden": "false",
            "active": true,
            "selectedColor": '#409EFE',
            "iconPath": "@/static/images/tabbar/mine.png",
            "selectedIconPath": "@/static/images/tabbar/mine_.png",
            "text": "我的"
          }
        ]
      }
    },
    methods: {

    }
  }
</script>